<template>
  <!-- nextTick()的理解：
        需要注意的是，在 created 和 mounted 阶段，如果需要操作渲染后的视图，也要使用 nextTick 方法。 -->
  <div>
    <input v-if="msg" v-model="msg" type="text" ref="txtMsg" />
    <button @click="change">修改msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  created() {
    console.log(this.msg);
  },
  mounted() {
    console.log(this.msg);
    // console.log("mounted", this.$refs.txtMsg.value);
  },
  updated() {
    console.log("updated", this.msg);
  },
  methods: {
    change() {
      this.msg = "大家好。";
      console.log(this.msg); //大家好。
      // console.log("change", this.$refs.txtMsg.value); // dom 上面的value值还是abc.
      this.$nextTick(() => {
        console.log("渲染DOM后，input 节点的值：", this.$refs.txtMsg.value); // 在updated之后执行输出的。
      });
    },
  },
};
</script>

<style>
</style>